<template>
  <div class="banner" id="banner2">
    <div class="banner-bgdarkener">
      <ElRow>
        <ElCol :xs="1" :sm="2" :md="3" :lg="3" :xl="3"></ElCol>
        <ElCol :xs="22" :sm="20" :md="16" :lg="14" :xl="14">
          <div style="height: 200px" />
          <h2 class="banner-heading">
            Training: An Easy-to-use Learning Platform
          </h2>
          <p class="banner-text">
            LID-CBALT provides a detailed online tutorial to help users learn
            how to obtain the optimal LID layout with a quantitative method in
            the testing area.
          </p>
        </ElCol>
      </ElRow>
    </div>
  </div>
  <div class="l-11">
    <strong>Here will tell you how to use our toolkit step by step</strong>
  </div>

  <div id="todo-list-app" style="z-index: -1">
    <el-tabs
      v-model="activeName"
      tab-position="left"
      type="border-card"
      @tab-click="handleTabClick"
    >
      <el-tab-pane name="one" label="Research Area.shp">
        <ol id="line">
          <li v-for="i in info1" v-bind:key="i.id" class="l-li">
            <div class="l-box"></div>
            <el-row>
              <el-col :span="3"
                ><div class="l-index">
                  {{ i.id + 1 }}
                </div></el-col
              >

              <el-col :span="8"
                ><div>
                  <p class="l-title">{{ i.title }}</p>
                  <p class="l-maintext" v-html="i.text"></p></div
              ></el-col>

              <el-col :span="2"><div class="l-middleEmpty"></div></el-col>

              <el-col :span="8" class="l-rightpic">
                <el-image
                  v-bind:src="i.pic"
                  fit="cover"
                  alt="some_text"
                ></el-image>
              </el-col>

              <el-col :span="3"><div class="rightempty"></div></el-col>
            </el-row>
          </li>
        </ol>
      </el-tab-pane>
      <el-tab-pane name="two" label="Research Area SWMM Modle.inp">
        <ol id="line">
          <li v-for="i in info2" v-bind:key="i.id" class="l-li">
            <div class="l-box"></div>
            <el-row>
              <el-col :span="3"
                ><div class="l-index">
                  {{ i.id + 1 }}
                </div></el-col
              >

              <el-col :span="8"
                ><div>
                  <p class="l-title" v-html="i.title"></p>
                  <p class="l-maintext" v-html="i.text"></p>
                  <el-image
                    v-if="i.leftpicshow == 'true'"
                    v-bind:src="i.pictext"
                    fit="cover"
                    alt="some_text"
                  ></el-image>
                </div>
              </el-col>

              <el-col :span="2"><div class="l-middleEmpty"></div></el-col>

              <el-col :span="8" class="l-rightpic">
                <el-image
                  v-bind:src="i.pic"
                  fit="cover"
                  alt="some_text"
                ></el-image>
              </el-col>

              <el-col :span="3"><div class="rightempty"></div></el-col>
            </el-row>
          </li>
        </ol>
      </el-tab-pane>
      <el-tab-pane name="three" label="LID types for Sub-Catchment.txt">
        <p class="l-title">Multi-objective Optimization Algorithm(GDE3)</p>

        <ol id="line">
          <li v-for="i in info3" v-bind:key="i.id" class="l-li">
            <div class="l-box"></div>
            <el-row>
              <el-col :span="3"
                ><div class="l-index">
                  {{ i.mainId }}<a style="font-size: 32px">.{{ i.subId }} </a>
                </div>
              </el-col>

              <el-col :span="8"
                ><div>
                  <p class="l-title" v-html="i.title"></p>
                  <p class="l-maintext" v-html="i.text"></p>
                  <el-image
                    v-if="i.leftpicshow == 'true'"
                    v-bind:src="i.pictext"
                    fit="cover"
                    alt="some_text"
                  ></el-image></div
              ></el-col>

              <el-col :span="2"><div class="l-middleEmpty"></div></el-col>

              <el-col :span="8" class="l-rightpic">
                <el-image
                  v-if="i.pic != ''"
                  v-bind:src="i.pic"
                  fit="cover"
                  alt="some_text"
                ></el-image>
              </el-col>

              <el-col :span="3"><div class="rightempty"></div></el-col>
            </el-row>
          </li>
        </ol>
      </el-tab-pane>
      <el-tab-pane name="four" label="LID Facilities Unit Price.txt">
        <p class="l-title">
          Life Cycle Cost Calculation of LID Facilities(LCC Calculator)
        </p>
        <!--第一步-->
        <div>
          <div class="l-box"></div>
          <el-row>
            <el-col :span="3"><div class="l-index">1</div></el-col>

            <el-col :span="16"
              ><div>
                <p class="l-title">
                  Input the construction cost and annual maintenance cost of
                  each LID facilitiy
                </p>
                <p class="l-maintext">
                  Construction cost consists of unit price of materials and
                  labour cost.
                </p>
              </div>
            </el-col>

            <el-col :span="5"><div class="l-middleEmpty"></div></el-col>
          </el-row>
        </div>
        <div>
          <!--第一行内容-->
          <el-row :gutter="30">
            <el-col :span="12">
              <el-row :gutter="10">
                <el-col :span="10">
                  <el-image
                    v-bind:src="bioretentioncell"
                    fit="contain"
                  ></el-image>
                </el-col>
                <el-col :span="14">
                  <p class="price-title">bio-retention cell</p>
                  <el-row :gutter="10">
                    <el-col :span="12" class="price-text">
                      <p>Construction cost<br />(US$/m2)</p>
                      <el-input
                        v-model="input21"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                    <el-col :span="12" class="price-text">
                      <p>Annual maintenance cost<br />(US$/m2/yr)</p>
                      <el-input
                        v-model="input22"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="10">
                <el-col :span="10">
                  <el-image v-bind:src="greenroof" fit="contain"></el-image>
                </el-col>
                <el-col :span="14">
                  <p class="price-title">green roof</p>
                  <el-row :gutter="10">
                    <el-col :span="12" class="price-text">
                      <p>Construction cost<br />(US$/m2)</p>
                      <el-input
                        v-model="input11"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                    <el-col :span="12" class="price-text">
                      <p>Annual maintenance cost<br />(US$/m2/yr)</p>
                      <el-input
                        v-model="input12"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!--第二行内容-->
          <el-row :gutter="30">
            <el-col :span="12">
              <el-row :gutter="10">
                <el-col :span="10">
                  <el-image
                    v-bind:src="infiltrationtrench"
                    fit="contain"
                  ></el-image>
                </el-col>
                <el-col :span="14">
                  <p class="price-title">infiltration trench</p>
                  <el-row :gutter="10">
                    <el-col :span="12" class="price-text">
                      <p>Construction cost<br />(US$/m2)</p>
                      <el-input
                        v-model="input31"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                    <el-col :span="12" class="price-text">
                      <p>Annual maintenance cost<br />(US$/m2/yr)</p>
                      <el-input
                        v-model="input32"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="10">
                <el-col :span="10">
                  <el-image
                    v-bind:src="permeablepavement"
                    fit="contain"
                  ></el-image>
                </el-col>
                <el-col :span="14">
                  <p class="price-title">permeable pavement</p>
                  <el-row :gutter="10">
                    <el-col :span="12" class="price-text">
                      <p>Construction cost<br />(US$/m2)</p>
                      <el-input
                        v-model="input41"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                    <el-col :span="12" class="price-text">
                      <p>Annual maintenance cost<br />(US$/m2/yr)</p>
                      <el-input
                        v-model="input42"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!--第三行内容-->
          <el-row :gutter="30">
            <el-col :span="12">
              <el-row :gutter="10">
                <el-col :span="10">
                  <el-image v-bind:src="rainbarrel" fit="contain"></el-image>
                </el-col>
                <el-col :span="14">
                  <p class="price-title">rain barrel</p>
                  <el-row :gutter="10">
                    <el-col :span="12" class="price-text">
                      <p>Construction cost<br />(US$/m2)</p>
                      <el-input
                        v-model="input51"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                    <el-col :span="12" class="price-text">
                      <p>Annual maintenance cost<br />(US$/m2/yr)</p>
                      <el-input
                        v-model="input52"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="10">
                <el-col :span="10">
                  <el-image v-bind:src="raingarden" fit="contain"></el-image>
                </el-col>
                <el-col :span="14">
                  <p class="price-title">rain garden</p>
                  <el-row :gutter="10">
                    <el-col :span="12" class="price-text">
                      <p>Construction cost<br />(US$/m2)</p>
                      <el-input
                        v-model="input61"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                    <el-col :span="12" class="price-text">
                      <p>Annual maintenance cost<br />(US$/m2/yr)</p>
                      <el-input
                        v-model="input62"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!--第四行内容-->
          <el-row :gutter="30">
            <el-col :span="12">
              <el-row :gutter="10">
                <el-col :span="10">
                  <el-image
                    v-bind:src="rooftopdisconnection"
                    fit="contain"
                  ></el-image>
                </el-col>
                <el-col :span="14">
                  <p class="price-title">rooftop disconnection</p>
                  <el-row :gutter="10">
                    <el-col :span="12" class="price-text">
                      <p>Construction cost<br />(US$/m2)</p>
                      <el-input
                        v-model="input71"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                    <el-col :span="12" class="price-text">
                      <p>Annual maintenance cost<br />(US$/m2/yr)</p>
                      <el-input
                        v-model="input72"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="10">
                <el-col :span="10">
                  <el-image
                    v-bind:src="vegetativeswale"
                    fit="contain"
                  ></el-image>
                </el-col>
                <el-col :span="14">
                  <p class="price-title">vegetative swale</p>
                  <el-row :gutter="10">
                    <el-col :span="12" class="price-text">
                      <p>Construction cost<br />(US$/m2)</p>
                      <el-input
                        v-model="input81"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                    <el-col :span="12" class="price-text">
                      <p>Annual maintenance cost<br />(US$/m2/yr)</p>
                      <el-input
                        v-model="input82"
                        placeholder="input here"
                        type="number"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!--第二步-->
        <div>
          <div class="l-box"></div>
          <el-row>
            <el-col :span="3"><div class="l-index">2</div></el-col>

            <el-col :span="16"
              ><div>
                <p class="l-title">Input the interest rate (%)</p>
                <el-input
                  v-model="interestRate"
                  placeholder="input here"
                  type="number"
                ></el-input>
                <!--第二步中的表格-->
                <p class="textstep2">
                  The useful life of LID facilities is in accordance with the
                  following table.
                </p>
                <div>
                  <el-table
                    :data="tableData"
                    style="width: 100%"
                    :stripe="true"
                    :border="true"
                  >
                    <el-table-column prop="type" label="LID Type" width="300">
                    </el-table-column>
                    <el-table-column
                      prop="yr"
                      label="Useful Life (yr)"
                      width="300"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>

            <el-col :span="5"><div class="l-middleEmpty"></div></el-col>
          </el-row>
        </div>
        <!--第三步-->
        <div>
          <div class="l-box"></div>
          <el-row>
            <el-col :span="3"><div class="l-index">3</div></el-col>

            <el-col :span="16"
              ><div>
                <p class="l-title">
                  Get the total annual cost:
                  <button v-on:click="calculate">Calculate</button>
                </p>

                <!--文本框-->
                <div id="result-box">
                  {{ textarea }}
                </div>
                <!--文本框下面的介绍-->
                <p class="textstep3">
                  Total annual cost = Annual and one-time construction cost +
                  Annual maintenance cost
                </p>
                <el-row>
                  <el-col :span="8">
                    <el-image v-bind:src="expression" fit="contain"></el-image>
                  </el-col>
                  <el-col :span="16" class="textexpression">
                    <a>
                      A(LID): Annual and one-time construction cost（US$/m2/yr）
                      <br />P(LID): Construction costs（US$/m2) <br />n(LID):
                      Useful life of LID facilities（yr） <br />i: interest
                      rate（%）</a
                    >
                  </el-col>
                </el-row>
              </div>
            </el-col>

            <el-col :span="5"><div class="l-middleEmpty"></div></el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
export default {
  name: "toolkit",
  emits: ["change-comp"],
  data() {
    return {
      activeName: "one",
      //教程页所需要的数据
      info1: [
        {
          id: 0,
          title: "Set up sub-catchment layers in CAD",
          text: "Collate land use types in site CAD and set up sub-catchment layers based on land use type and type of LID facilities that can be built (e.g. platroof, nearby, parking, pavement, plant, slopingroof, unable, vacant).",
          pic: require("../assets/教程1/1.jpg"),
        },
        {
          id: 1,
          title: "Divide the sub-catchments",
          text: "Taking care to ensure that each sub-catchment is closed and that there are no gaps or overlaps between sub-catchments.",
          pic: require("../assets/教程1/2.jpg"),
        },
        {
          id: 2,
          title: "Import the delineated sub-catchment CAD files into ArcGIS",
          text: "Open ArcMap, open the directory and find the CAD file, select Polygon, right click - export - to shapefile (single).",
          pic: require("../assets/教程1/3.jpg"),
        },
        {
          id: 3,
          title: "Feature Class To Feature Class",
          text: "Select the output location and fill in the name naming for the output element class",
          pic: require("../assets/教程1/4.jpg"),
        },
        {
          id: 4,
          title: "Right click on the layer，and open properties form",
          text: "Open ArcMap, open the directory and find the CAD file, select Polygon, right click - export - to shapefile (single).",
          pic: require("../assets/教程1/5.jpg"),
        },
        {
          id: 5,
          title: "Add Field",
          text: "Click on Table Options - Add Field and create a new name field (example: SID) to name the sub catchment area.",
          pic: require("../assets/教程1/6.jpg"),
        },
        {
          id: 6,
          title: "Field Calculator",
          text: "If the attributes are missing the shape_Area (in m²), create a new field and right click - select Calculate Geometry to get the area.",
          pic: require("../assets/教程1/7.jpg"),
        },
        {
          id: 7,
          title: "Feature Vertices to Points",
          text: "Click ArcToolbox - Data Management tools - Feature - Feature Vertices to Points",
          pic: require("../assets/教程1/8.jpg"),
        },
        {
          id: 8,
          title:
            "Input sub-catchment layers. Get the fold of the sub-catchment",
          text: "",
          pic: require("../assets/教程1/9.jpg"),
        },
        {
          id: 9,
          title:
            "Create two new fields for X-point coordinates and Y-point coordinates",
          text: "Right click on the dashboard layer - open the properties form.<br>Right click on the X-point coordinate field and select Calculate geometry-point X-coordinate; similarly right-click on the Y-point coordinate field and select Calculate geometry-point Y-coordinate.",
          pic: require("../assets/教程1/10.jpg"),
        },
        {
          id: 10,
          title: "Exporting GIS property tables to excel",
          text: "<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Get the X and Y coordinates of the fold, exporting GIS property tables to excel.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>In the output excel sheet, the LID type attribute is assigned to each sub-catchment and can be assigned uniformly according to the CAD layer division.",
          pic: require("../assets/教程1/11.jpg"),
        },
      ],
      info2: [
        {
          id: 0,

          title:
            "Determine the sub-catchments base property parameters in the inp file of SWMM：<strong>[SUBCATCHMENTS]</strong> and <strong>[Polygons]</strong>",
          text: "<strong>[SUBCATCHMENTS]</strong> is the physical properties of the sub-catchment, extracted from the base data, mainly including Name, Area (in ha), Rain Gage (rainfall station), Outlet (sub-catchment drainage outlet, subsequently defined), %Imperv (imperviousness), Width (generally can be the open square of the area, m), %Slope (average slope), CurbLen (default 0), SnowPack (can be empty when there is no snow melt).<p><strong>[Polygons]</strong> are the coordinates of the sub-catchment shape fold points, which can be extracted by ArcGIS.<p>",
          pic: require("../assets/教程2/1.jpg"),
        },
        {
          id: 1,
          title:
            "Check the parameters in excel and copy them to the inp file (open in Notepad)",
          text: "",
          pictext: require("../assets/教程2/2.jpg"),
          pic: require("../assets/教程2/3.jpg"),
        },
        {
          id: 2,
          title:
            "Open inp with SWMM, create a new rainfall station and name it ",
          text: "(corresponds to Rain Gage above)",
          pic: require("../assets/教程2/4.jpg"),
        },
        {
          id: 3,
          title:
            "Add the pipe network according to the pipe network information",
          text: "The pipe network parameters in inp include<strong> [JUNCTIONS]</strong> (node properties), <strong>[OUTFALLS]</strong> (outlet properties), <strong>[CONDUITS] </strong>(basic pipe line properties), <strong>[XSECTIONS]</strong> (pipe line shape properties),<strong> [COORDINATES] </strong>(node coordinates), and similarly, excel determines the parameters and copies them to inp.",
          leftpicshow: "true",
          pictext: require("../assets/教程2/右.png"),
          pic: require("../assets/教程2/左.png"),
        },
        {
          id: 4,
          title: "Obtain the sub-catchments and pipe networks in SWMM",
          text: "",
          pic: require("../assets/教程2/10.jpg"),
        },
        {
          id: 5,
          title: "Define the outlet of the sub-catchments",
          text: "The outlet can be a neighboring sub-sink or a nearby node, and fill in the corresponding (neighboring sub-sink or node) name in the outlet item of the sub-sink, which can be operated in SWMM or in excel",
          pic: require("../assets/教程2/11.jpg"),
        },
        {
          id: 6,
          title:
            "Insert the rainfall time series (measured rainfall or design rainfall) in inp",
          text: "",
          pic: require("../assets/教程2/12.jpg"),
        },
        {
          id: 7,
          title: "Select the corresponding rainfall time series in SWMM",
          text: "",
          pic: require("../assets/教程2/13.jpg"),
        },
        {
          id: 8,
          title: "Set the corresponding simulation time",
          text: "",
          pic: require("../assets/教程2/14.jpg"),
        },
        {
          id: 9,
          title: "Click to run !",
          text: "",
          pic: require("../assets/教程2/15.jpg"),
        },
      ],
      info3: [
        {
          id: 0,
          mainId: "1",
          subId: "",
          title: "Input data",
          text: "Input <p>a) study area inp file</p><p>b) outlet name</p><p>c) output file path </p><p>to generate the pipe network transport coefficient file Simplified_coef.txt file, the results are as follows</p>",
          pic: require("../assets/教程3/1.jpg"),
        },
        {
          id: 1,
          mainId: "2",
          subId: "1",
          title: "Enter the All_LID_usage_base.txt file",
          text: "Enter the All_LID_usage_base.txt file, which is equivalent to the [LID_USAGE] module in the inp file. <P>Column (1) is the sub-catchment name, column (2) is the LID facility name, column (3) defaults to 1 (indicating that all corresponding sub-catchments are converted to the specified LID facility), column (4) is the area of the corresponding sub-catchment, column (5) is the diffuse width of the corresponding sub-catchment, column (6) is the initial saturation of the LID facility, column (7) is the sub-catchment flowing to the LID facility impervious surface ratio, column (8) is the permeable surface ratio of the sub-catchment receiving outflow from the LID facility, column (9) is the file path of the LID hydrologic change process (* indicates that the corresponding file is not generated), column (10) is the outlet of the drainage layer of the LID facility (* indicates the default outlet flowing to the corresponding sub-catchment), and column (11) is the permeable surface ratio of the sub-catchment flowing to the LID facility.</P>Users can download the corresponding example file to view the replacement.",
          pic: require("../assets/教程3/2.jpg"),
        },
        {
          id: 2,
          mainId: "2",
          subId: "2",
          title: "Enter the sub_lid_bounds.txt file.",
          text: "Enter the sub_lid_bounds.txt file.<p>Column (1) is the name of the sub-catchment, column (2) is the appropriate LID type for the corresponding sub-catchment, and column (3) is the abbreviated designation of the LID facility in the second column [ (GR) Green Roof; (RB) Rain Barrel; (RD) Rooftop Disconnection; (PP) Permeable Pavement; (BRC) Bio-Retention Cell; (RG) Rain Garden; (VS) Vegetative Swale; (IT) Infiltration Trench; XX means no LID construction], column (4) is the definition of the category of these several combinations of suitable LIDs to be built, columns (5) and (6) are the lower and upper limits of the variation of the decision variables in the multi-objective optimization algorithm, respectively, with the lower limit being 0 and the upper limit being the possible LID modification options for the corresponding sub-catchment (taking XX no LID construction also as a working condition), i.e.<p>",
          pic: require("../assets/教程3/3.jpg"),
        },
        {
          id: 3,
          mainId: "2",
          subId: "3",
          title: "Enter the pipe network transport coefficient file",
          text: "Enter the pipe network transport coefficient file Simplified_coef.txt file to replace the SWMM pipe network transport module and improve the operation speed, the first column is the study area well site name and column (2) is the well site flow transport coefficient.",
          pic: require("../assets/教程3/4.jpg"),
        },
        {
          id: 4,
          mainId: "2",
          subId: "4",
          title: "Set the path to the output inp file",
          text: "",
          pic: "",
        },
        {
          id: 4,
          mainId: "2",
          subId: "5",
          title:
            "Set the output path of the decision variable VAR and the objective function FUN.",
          text: "",
          pic: "",
        },
        {
          id: 6,
          mainId: "3",
          subId: "1",
          title: "Result file 1",
          text: "FUN.txt, one line corresponds to one construction cost and reduction rate",
          pic: require("../assets/教程3/5.jpg"),
        },
        {
          id: 7,
          mainId: "3",
          subId: "2",
          title: "Result file 1",
          leftpicshow: "true",
          text: "VAR.txt, one row corresponds to one LID layout scenario with construction cost and reduction rate, and each column corresponds to one sub-catchment.",
          pictext: require("../assets/教程3/7.jpg"),
          pic: require("../assets/教程3/6.jpg"),
        },
        {
          id: 8,
          mainId: "3",
          subId: "3",
          title:
            "The results in VAR.txt are converted to the corresponding LID types, corresponding to the following.",
          text: "0: means no construction lid<p>A: → 1：GRoof；2：RBarrel</p><p>B: → 1：RDiscon_Substitue</p><p>C: → 1：PPavement</p><p>D: → 1：PPavement；2：BRCell；3：RGarden</p><p>E: → 1：BRCell；2：RGarden；3：VSwale</p><p>F: → 1：PPavement；2：VSwale；3：InTrench；</p><p>G: → 1：PPavement；2：BRCell；3：RGarden；4：VSwale；5：InTrench</p>",
          pic: require("../assets/教程3/8.jpg"),
        },
        {
          id: 8,
          mainId: "3",
          subId: "4",
          title:
            "Link the transformation results to ArcMap to generate LID layout maps",
          text: "",
          pic: require("../assets/教程3/9.jpg"),
        },
      ],
      //第四页图片的链接
      bioretentioncell: require("../assets/教程页4/bio-retention cell.jpg"),
      greenroof: require("../assets/教程页4/green roof.jpg"),
      infiltrationtrench: require("../assets/教程页4/infiltration trench.jpg"),
      permeablepavement: require("../assets/教程页4/permeable pavement.jpg"),
      rainbarrel: require("../assets/教程页4/rain barrel.jpg"),
      raingarden: require("../assets/教程页4/rain garden.jpg"),
      rooftopdisconnection: require("../assets/教程页4/rooftop disconnection.jpg"),
      vegetativeswale: require("../assets/教程页4/vegetative swale.jpg"),
      //第四页用户填入的和图片对应的输入，双向绑定，这里的顺序和上面连接的顺序一致
      input11: "",
      input12: "",

      input21: "",
      input22: "",

      input31: "",
      input32: "",

      input41: "",
      input42: "",

      input51: "",
      input52: "",

      input61: "",
      input62: "",

      input71: "",
      input72: "",

      input81: "",
      input82: "",
      //第四页第二部要收入的参数
      interestRate: "",
      //第四页表格的数据
      tableData: [
        {
          type: "Bio-Retention Cell",
          yr: "30",
        },
        {
          type: "Rain Garden",
          yr: "30",
        },
        {
          type: "Vegetative Swale",
          yr: "30",
        },
        {
          type: "Infiltration Trench",
          yr: "30",
        },
        {
          type: "Permeable Pavement",
          yr: "30",
        },
        {
          type: "Green Roof",
          yr: "30",
        },
        {
          type: "Rooftoop Disconnection",
          yr: "15",
        },
        {
          type: "Rain Barrel",
          yr: "10",
        },
      ],
      //文本域
      textarea: "Click the button above to get the result here.",
      //最后公式图片的链接
      expression: require("../assets/教程页4/公式.png"),
    };
  },
  methods: {
    calA(p, i, n, m) {
      p = parseFloat(p);
      i = parseFloat(i);
      m = parseFloat(m);
      return p * (Math.pow(i * (1 + i), n) / (Math.pow(1 + i, n) - 1)) + m;
    },
    calculate() {
      console.log("in cal");
      var result = 0;
      result += this.calA(this.input11, this.interestRate, 30, this.input12);
      result += this.calA(this.input21, this.interestRate, 30, this.input22);
      result += this.calA(this.input31, this.interestRate, 30, this.input32);
      result += this.calA(this.input41, this.interestRate, 30, this.input42);
      result += this.calA(this.input51, this.interestRate, 10, this.input52);
      result += this.calA(this.input61, this.interestRate, 30, this.input62);
      result += this.calA(this.input71, this.interestRate, 15, this.input72);
      result += this.calA(this.input81, this.interestRate, 30, this.input82);
      this.textarea = result;
    },
    handleTabClick(tab) {
      console.log(tab.paneName);
      document.getElementById("tutorComp").innerHTML = tab.paneName;
    },
  },

  mounted() {
    var that = this;
    console.log(document.getElementById("tutorComp").innerHTML);
    window.setInterval(function () {
      //console.log(document.getElementById("tutorComp").innerHTML);
      that.activeName = document.getElementById("tutorComp").innerHTML;
    }, 500);
  },
};
</script>

<style scoped>
#result-box {
  text-align: left;
  border-style: solid;
  border-color: #1f884f;
  border-width: 1px;
  border-radius: 10px;
  min-height: 3rem;
  padding: 10px;
}
button {
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 1);
  border-radius: 15px;
  background-color: rgba(31, 136, 79, 1);
  width: 120px;
  height: 46px;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  text-decoration: underline;
  color: #ffffff;
  left: 0%;
}
.banner {
  height: 520px;
  background-image: url("http://lid-cbalt.com/data/images/bg2-home.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  margin-bottom: 10px;
}
.banner-bgdarkener {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  vertical-align: bottom;
  padding: 0 20px 0 20px;
}
.banner-heading {
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
  color: #6cdb9f;
  text-align: left;
  margin-top: 0px;
}
.banner-text {
  height: 85px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
  text-align: left;
}
.textexpression {
  text-align: left;
  font-size: 14px;
  margin: 0px 0px;
}
.textstep3 {
  text-align: left;
  font-size: 14px;
  margin: 30px 0px;
}
.textstep2 {
  text-align: left;
  font-size: 14px;
  margin: 30px 0px;
}
.price-text {
  text-align: left;
  font-size: 14px;
}
.price-title {
  text-align: left;
  margin: 0px 0px;
  text-indent: 0px;
  font-size: 24px;
  color: #349c1a;
}
.l-11 {
  margin: 80px 0px;
  font-size: 32px;
  text-align: center;
  vertical-align: middle;
}
.l-index {
  color: #91b354;
  font-size: 64px;
  font-style: oblique;
}
.l-rightpic {
  align-content: center;
  width: 100%;

  min-width: 300px;
}
.l-title {
  font-size: 24px;
  color: #91b354;
  text-align: left;
}
.l-maintext {
  text-indent: 40px;
  text-align: left;
}
.l-li {
  list-style-type: none;
}
.l-box {
  background-color: #91b354;
  margin: 40px 20px;
  color: #ffffff;
  max-width: 600px;
  height: 8px;
}
</style>